<template>
  <div class="time-line">
    <div class="time-line-mode" v-for="(item, i) in steps" :key="i">

              <span class="number" :class="{ active: item.active }" >
                {{ i + 1 }}
            </span>
      <span class="title" :class="{ active: item.active }"  @click="statusClick(item)">
                {{ item.title }}
            </span>
      <b v-show="i != steps.length - 1" :class="{ active: item.active }"></b>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 采购产品信息
 */
import dayjs from 'dayjs'
import router from "/@/router";

const $emits = defineEmits(['clickValue'])
defineProps({
  // 激活
  active: {
    type: Number,
    default: 1,
  },
  // 步骤
  steps: {
    type: Array,
    default: [
      { title: '订单提交', active: true },
      { title: '卖方报价', active: false },
      { title: '卖方出库', active: false },
      { title: '快递运输', active: false },
      { title: '收货确认', active: false },
    ]
  }
})
const statusClick = (value:any)=>{
  if(value.active){
    $emits('clickValue',value.type)
  }
}
</script>
<style lang="scss" scoped>
.time-line {
  display: flex;
  align-items: center;
  box-sizing: border-box;

  .time-line-mode {
    width: 20%;
    display: flex;
    align-items: center;

    .number {
      width: 24px;
      height: 24px;
      background-color: #e4e7ed;
      border-color: #e4e7ed;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      margin-right: 16px;
      color: #ffffff;

      &.active {
        background-color: var(--el-color-primary);
        border-color: var(--el-color-primary);
      }
    }

    .title {
      color: #909399;
      font-size: 14px;
      margin-right: 20px;

      &.active {
        color: var(--el-color-primary);
        cursor: pointer;
      }
    }

    b {
      font-style: normal;
      border-top: 1px dashed #909399;
      flex: 0.8;
      height: 1px;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        top: -6.5px;
        right: -6px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 0 6px 6px;
        border-color: transparent transparent transparent #909399;
      }

      &.active {
        border-top: 1px dashed var(--el-color-primary);
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: -6.5px;
          right: -6px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 6px 0 6px 6px;
          border-color: transparent transparent transparent var(--el-color-primary);
        }
      }
    }
  }
}
</style>
